<template>
	<div id="">
		<NavCom :title="'购物车'" left_text="" bg_color="#f0f0f0" text_color="#999" @left-click="$router.back()">
			<template #icon_left>
				<span class="iconfont icon-xiangzuojiantou"></span>
			</template>
			<template #icon_right>
				<span class="iconfont icon-sousuo"></span>
			</template>
		</NavCom>
		<!-- 遍历购物车内容 -->
		<div v-if="$store.state.cart.goods.length">
			<div class="goods">
				<!-- 遍历vuex中购物车的数据 -->
				<div class="good" v-for="good in $store.state.cart.goods" :key="good.goods_id">
					<div class="col-10">
						<CheckBox size=".4rem" color="#f30" v-model="good.sel"
							@change="$store.dispatch('updateCart',{...good})"></CheckBox>
						<!-- <input type="checkbox" v-model="good.sel" @change="$store.dispatch('updateCart',{...good})"> -->
					</div>
					<div class="col-30">
						<img :src="good.img_url" alt="" width="90%" />
					</div>
					<div class="col-50">
						<p>{{good.name}}</p>
						<p>{{good.price}}</p>
						<!-- 把商品最新数据展开传给updateCart  -->
						<p>
							<SteperCom v-model="good.num" @input="$store.dispatch('updateCart',{...good})"></SteperCom>
						</p>
					</div>
					<div class="col-10" @click="$store.dispatch('delCart',good.id)">
						<span class="iconfont icon-lajixiang"></span>
					</div>
				</div>
			</div>
			<div>全选
				<!-- 监听change事件 -->
				<CheckBox @change="$store.dispatch('selectAll',$event)" size=".4rem" :value="$store.getters.checkAll">
				</CheckBox>
				{{$store.getters.checkAll}}
		</div>
			<div class="footer">
				总数量：{{$store.getters.totalCount}} <br>
				总价格：{{$store.getters.totalPrice}}
			</div>
		</div>
		<EmptyCom v-else title="主人购物车还没商品~" type="normal">
			<button @click="$router.push('/')">去购物</button>
		</EmptyCom>
	</div>
</template>
<style scoped="scoped" lang="scss">
	.good {
		display: flex;

		.col-10 {
			width: 10%;
		}

		.col-30 {
			width: 30%;
		}

		.col-50 {
			width: 50%;
		}
	}
</style>
<script>
	// 导入导航
	import CheckBox from '@/components/CheckBox.vue'
	import NavCom from '@/components/NavCom.vue'
	import SteperCom from '@/components/SteperCom.vue'
	import EmptyCom from '@/components/empty/EmptyCom.vue'
	import {
		/* GetA,
		// GetB,
		// GetC,
		// GetD
		// GetE
		// GetF
		// GetG
		// GetH,
		// GetI,*/
		GetJ,
	} from '@/api/home.js'
	export default {
		components: {
			NavCom,
			SteperCom,
			CheckBox,
			EmptyCom
		},
		created() {
			GetJ()
				.then(res => {
					console.log("玻多多", res.data);
				})
			// GetI()
			// .then(res=>{
			// 	console.log("猛雨",res.data);
			// })
			// GetH()
			// .then(res=>{
			// 	console.log("夏",res.data);
			// })
			/* GetG()
			.then(res=>{
				console.log("黄",res.data);
			}) */
			// GetF()
			// .then(res=>{
			// 	console.log("段",res.data)
			// })
			// GetE()
			// .then(res=>{
			// 	console.log("邵星宇",res.data)
			// })
			// GetD()
			// .then(res=>{
			// 	console.log("韩",res.data)
			// })
			/* GetC()
			.then(res=>{
				console.log("时",res.data)
			}) */
			/* GetB()
			.then(res=>{
				console.log("亚涛",res.data)
			}) */
			// GetA()
			// .then(res=>{
			// 	// console.log("卫敏",res.data)
			// })
		}
	}
</script>

<style>
</style>
